<template>
  <div class="Equipment-box">
    <div class="dropdown">
            <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">请选择要查看的教室
                <span class="caret"></span>
            </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                    <li role="presentation" v-for="(room,index) of roomList" :key="index">
                        <a role="menuitem" tabindex="-1" href="javascript:void(0)" @click="getEquipmentByRoomNo(room.roomNo)">{{room.roomNo}}</a>
                    </li>
                </ul>
        </div>
        <div class="Equipment-selectRoom">
            <span style="font-size:20px;font-weight:800">当前教室:{{currentRoom}}</span>
        </div>
        <div class="Equipment-conditionList">
            <el-table
            height="380px"
            border
            :data="equipmentList"
            >
                <el-table-column
                prop="equno"
                label="设备编号"
                width="100">
                </el-table-column>
                <el-table-column
                prop="equname"
                label="设备名"
                width="180">
                </el-table-column>
                <el-table-column
                prop="equstate"
                label="当前状态"
                width="180">
                    <template slot-scope="scope">
                        <span v-if="scope.row.equstate==='1'">正常</span>
                        <span style="color:red" v-if="scope.row.equstate==='0'">异常</span>
                    </template>
                </el-table-column>
                <el-table-column
                prop="createtime"
                label="购置时间">
                </el-table-column>
                <el-table-column
                prop="createtime"
                label="已用时限 /天(#注红:超过报废年限)">
                    <template slot-scope="time">
                        <span :class="[getTimeDifference(time.row.createtime)<1000?'text-color-normal':'text-color-abnormal']">
                            {{ getTimeDifference(time.row.createtime) }}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-box">
            <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageParams.currentPage"
            :page-sizes="[5, 10, 15]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="equipmentRows"
            >

            </el-pagination>
        </div>		
  </div>
</template>

<script>
import debounce from 'lodash/debounce';
import { mapState } from 'vuex';
export default {
    name:'EquipmentSearch',
    methods: {
      handleSizeChange(val) {
        this.pageParams.sizePage=val;
        this.getEquipmentmentByCodition(this.currentRoom)

      },
      handleCurrentChange(val) {
        this.pageParams.currentPage=val;
        this.getEquipmentmentByCodition(this.currentRoom)

      },
      getEquipmentByRoomNo(roomNo){
        //每次选择教室之前先将分页插件当前页切换为首页（p1），解决上次教室page>1,本次教室page=1时查看page>1时错乱的bug
        this.pageParams.currentPage=1;
        this.getEquipmentmentByCodition(roomNo)
      },
      getEquipmentmentByCodition:debounce(function(roomNo){
        this.currentRoom=roomNo;
        let obj=Object.assign(this.pageParams,{'currentRoom':roomNo});
        this.$store.dispatch("equipmentSearch/getEquipmentByPage",obj)
      }
      ),
      getTimeDifference(createTime){
        return Math.ceil((new Date().getTime()-new Date(createTime).getTime())/86400000)
      }
    },
    data() {
      return {
        currentRoom:'',
        pageParams:{
            currentPage: 1,
            sizePage:5
        }
      }
    },
    mounted(){
        this.$store.dispatch('equipmentSearch/getRoomList');
        this.$store.state.equipmentSearch.equipmentList=[];
    },
    computed:{
        ...mapState('equipmentSearch',['roomList','equipmentList','equipmentRows'])
    }
}
</script>

<style scoped lang="css">
    .Equipment-box{
        position:inherit;
        top:0;
        height:100%;
        left:0;
        width:100%;
        overflow: auto;
    }
    .dropdown{
        position:inherit;
        margin-top: 2%;
        left: 6%;
    }
    .Equipment-selectRoom{
        position:inherit;
        left: 6%;
        height: 5%;
        margin-top: 6%;
        background-color: lightskyblue;
        border-radius: 10px;
    }
    .Equipment-conditionList{
        position: inherit;
        height: 80%;
        width: 80%;
        left: 6%;
        margin-top: 10%; 
        overflow: auto;
    }
    .table-list{
        text-align: center;
        border-collapse:separate; 
        border-spacing:0px 20px;
    }
    .pagination-box{
        position: inherit;
        top: 90%;
        width:100%;
        text-align: center;
    }
    .text-color-abnormal{
        color: red;
        font-weight: 800;
        font-style: italic;
    }
    .text-color-normal{
        color: blue;
    }
</style>